<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <meta name="author" content="SixtyFPS GmbH" />

        <!--====== Favicon Icon ======-->
        <link rel="shortcut icon" href="https://slint.dev/assets/img/favicon.ico">
        <link rel="icon" type="image/x-icon" href="https://slint.dev/assets/img/favicon.svg">

        <!-- ===== All CSS files ===== -->
        <link rel="stylesheet" href="https://slint.dev/assets/css/style.css?v=1.9.1" />

        <!-- ===== Header from individual pages ===== -->
         
    <title>Slint Developer Documentation</title>
    <meta name="description" content="The developer documentation page of Slint." />

    </head>

    <body>
        <script>
            /* Check if dark theme is selected */
            if (localStorage.getItem('theme') === 'dark') {
              document.documentElement.classList.add('dark');
            }
            else if (localStorage.getItem('theme') === 'light') {
              document.documentElement.classList.add('light');
            }
        </script>

        <div class="wrap">
            <!-- ====== Header Start ====== -->
            <header class="top">
                <div class="header-wrap">

                    <a href="https://slint.dev/index.html" class="logo">Slint</a>

                    <nav class="main-navi">

                        <ul>
                            <li id="use-cases"><a href="https://slint.dev/use-cases.html">Use Cases</a></li>
                            <li id="docs"><a href="https://slint.dev/docs.html">Docs</a></li>
                            <li id="pricing"><a href="https://slint.dev/pricing.html">Pricing</a></li>
                            <li id="blog"><a href="https://slint.dev/blog">Blog</a></li>
                            <li class="navi-item-has-children" id="resources"><a href="#">Resources</a>
                                <ul>
                                    <li><a href="https://slint.dev/demos.html">Demos</a></li>
                                    <li><a href="https://slint.dev/videos.html">Videos</a></li>
                                    <li><a href="https://slint.dev/community.html">Community</a></li>
                                    <li><a href="https://slint.dev/supported-boards.html">Supported Boards</a></li>
                                  </ul>
                            </li>
                            <!-- <li class="search"><a href="/search-results.html">Search</a></li> -->
                            <li class="theme theme-light"><a href="#">Theme</a></li>
                            <li class="btn"><a href="https://slint.dev/get-started.html">Get Started</a></li>
                        </ul>

                    </nav>

                    <!-- <a href="/search-results.html" class="search-mobile">Search</a> -->

                    <button class="hamburger" aria-label="menu" aria-expanded="false" aria-controls="nav">
                        <span></span>
                        <span></span>
                        <span></span>
                    </button>

                </div><!-- .header-wrap -->
            </header>
            <!-- ====== Header End ====== -->

            
        <main>

            <!--
            Section blocks on this page:
            - one-column
            -->

            <script type="text/javascript">

                async function* makeTextFileLineIterator(fileURL) {
                    const utf8Decoder = new TextDecoder("utf-8");
                    const response = await fetch(fileURL);

                    if (response.status != 200)
                        return null;

                    const reader = response.body.getReader();
                    let { value: chunk, done: readerDone } = await reader.read();
                    chunk = chunk ? utf8Decoder.decode(chunk) : "";

                    const newline = /\r?\n/gm;
                    let startIndex = 0;
                    let result;

                    while (true) {
                        const result = newline.exec(chunk);
                        if (!result) {
                            if (readerDone) break;
                            const remainder = chunk.substr(startIndex);
                            ({ value: chunk, done: readerDone } = await reader.read());
                            chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : "");
                            startIndex = newline.lastIndex = 0;
                            continue;
                        }
                        yield chunk.substring(startIndex, result.index);
                        startIndex = newline.lastIndex;
                    }

                    if (startIndex < chunk.length) {
                        // Last line didn't end in a newline char
                        yield chunk.substr(startIndex);
                    }
                }

                function updateButtonHrefs() {
                    const buttons = document.querySelectorAll('a.doc');
                    const sel = document.getElementById('version');
                    buttons.forEach(button => {
                        let prevVersion = button.href.match("/([^/]*/[^/]*)/docs/")[1];
                        button.href = button.href.replace(prevVersion, sel.value);
                    });
                }

                async function fetchReadFile(url) {
                    const sel = document.getElementById('version');
                    for await (const version of makeTextFileLineIterator(url)) {
                        const opt = document.createElement("option");
                        opt.value = "releases/" + version;
                        opt.text = version;
                        sel.add(opt)
                    }
                    if (!sel.length) {
                        // add some known version
                        const opt = document.createElement("option");
                        opt.value = "releases/1.1.1";
                        opt.text = "1.1.1";
                        sel.add(opt)
                    }
                    const opt = document.createElement("option");
                    opt.value = "snapshots/master";
                    opt.text = "development snapshot";
                    sel.add(opt)
                    updateButtonHrefs();
                }

                window.addEventListener('load', () => {
                    fetchReadFile("/releases/versions.txt");
                    const sel = document.getElementById('version');
                    sel.addEventListener('change', updateButtonHrefs);
                }, false);

            </script>

            <section class="one-column">
                <h1>Documentation</h1>
            </section>

            <section class="select-filters">
                <div class="select-wrap">
                    <label for="version">Version</label>
                    <select id="version">
                    </select>
                </div>
            </section>

            <section class="four-doc-boxes">
                <div class="col-wrap">
                    <div class="col-1">
                        <h2>Browse</h2>
                        <p>Whether you’re developing the UI or the backend, our documentation will guide you.</p>
                    </div>
                </div>
                <div class="col-wrap">
                    <div class="col-2">
                        <div class="price-box">
                            <h5>DSL</h5>
                            <h4>Slint</h4>
                            <p><img src="https://slint.dev/assets/img/slint-favicon.svg"></p>
                            <p><a href="https://slint.dev/releases/1.1.1/docs/slint/index.html" class="btn doc">Language</a></p>
                        </div><!-- .price-box -->
                    </div><!-- .col-2 -->
                    <div class="col-2">
                        <div class="col-wrap">
                            <div class="price-box">
                                <h5>APIs</h5>
                                <h4>Using Rust</h4>
                                <p><img src="https://slint.dev/assets/img/rust-logo.svg"></p>
                                <p><a href="https://slint.dev/releases/1.1.1/docs/rust/slint" class="btn doc">API</a></p>
                                <p><a href="https://slint.dev/releases/1.1.1/docs/tutorial/rust" class="btn doc">Tutorial</a></p>
                                <p><a href="https://youtu.be/WBcv4V-whHk" class="btn" target="_blank">Video Tutorial</a></p>
                                <p><a href="https://github.com/slint-ui/slint-rust-template" class="btn" target="_blank">Project Template</a></p>
                            </div><!-- .price-box -->
                            <div class="price-box">
                                <h5>APIs</h5>
                                <h4>Using C++</h4>
                                <p><img src="https://slint.dev/assets/img/cpp_logo.svg"></p>
                                <p><a href="https://slint.dev/releases/1.1.1/docs/cpp" class="btn doc">API</a></p>
                                <p><a href="https://slint.dev/releases/1.1.1/docs/tutorial/cpp" class="btn doc">Tutorial</a></p>
                                <p><a href="https://github.com/slint-ui/slint-cpp-template" class="btn" target="_blank">Project Template</a></p>
                            </div><!-- .price-box -->
                            <div class="price-box">
                                <h5>APIs</h5>
                                <h4>Using NodeJS (beta)</h4>
                                <p><img src="https://slint.dev/assets/img/nodejs_logo.svg"></p>
                                <p><a href="https://slint.dev/releases/1.1.1/docs/node" class="btn doc">API</a></p>
                                <p><a href="https://slint.dev/releases/1.1.1/docs/tutorial/node" class="btn doc">Tutorial</a></p>
                                <p><a href="https://github.com/slint-ui/slint-nodejs-template" class="btn" target="_blank">Project Template</a></p>
                            </div><!-- .price-box -->
                        </div><!-- .col-wrap -->
                    </div><!-- .col-2 -->
                </div><!-- .col-wrap -->
            </section>

            <section class="one-column" style="padding: 50px 0 2em;">
                <p><a href="https://slint.dev/contact.html" class="btn btn-center" style="	background-color: var(--color_blue);
                    border-radius: 4px;
                    font-weight: 600; color: #fff;">Contact Us</a></p>
            </section>

        </main>
    

            <!-- ====== Footer Start ====== -->
            <footer>
                <div class="col-wrap">
                    <div class="col-6">
                        <p><a href="https://slint.dev/index.html"><img src="https://slint.dev/assets/img/slint-logo.svg" alt="Slint" width="141" height="47" class="footer-logo"></a></p>
                        <p class="some-links">
                            <a href="https://twitter.com/slint_ui" target="_blank"><img src="https://slint.dev/assets/img/icon-twitter.svg" alt="Twitter" width="40" height="40"></a>
                            <a href="https://www.linkedin.com/company/slint-ui/" target="_blank"><img src="https://slint.dev/assets/img/icon-linkedin.svg" alt="Linkedin" width="40" height="40"></a>
                            <a rel="me" href="https://fosstodon.org/@slint" target="_blank"><img src="https://slint.dev/assets/img/icon-mastodon.svg" alt="Mastodon" width="40" height="40"></a>
                            <!-- <a href="https://github.com/slint-ui/slint/discussions" target="_blank"><img src="https://slint.dev/assets/img/icon-github.svg" alt="Github Discussions" width="40" height="40"></a> -->
                            <!-- <a href="https://chat.slint.dev/" target="_blank"><img src="https://slint.devassets/img/icon-some.svg" alt="" width="40" height="40"></a> -->
                        </p>
                        <p><img src="https://slint.dev/assets/img/annual-ross-index.svg" data-darkimg="/assets/img/annual-ross-index-light.svg" data-lightimg="/assets/img/annual-ross-index.svg" alt="Annual Ross index" width="260" height="52" class="annual-ross"></p>
                    </div><!-- .col-6 -->
                    <div class="col-6">
                        <dl>
                            <dt style="color: var(--light, var(--color_dark_gray)) var(--dark, var(--color_light_gray_2));">About</dt>
                            <dd><a href="https://slint.dev/about-us.html">Us</a></dd>
                            <dd><a href="https://slint.dev/investors.html">Investors</a></dd>
                            <dd><a href="https://slint.dev/events.html">Events</a></dd>
                            <dd><a href="https://slint.dev/careers.html">Careers</a></dd>
                            <dd><a href="https://slint.dev/imprint.html">Imprint &amp; Privacy</a></dd>
                        </dl>
                    </div><!-- .col-6 -->
                    <div class="col-6">
                        <dl>
                            <dt style="color: var(--light, var(--color_dark_gray)) var(--dark, var(--color_light_gray_2));">Explore</dt>
                            <dd><a href="https://slint.dev/docs.html">Docs</a></dd>
                            <dd><a href="https://slint.dev/pricing.html">Pricing</a></dd>
                            <dd><a href="https://slint.dev/pricing.html#support">Support</a></dd>
                            <dd><a href="https://slint.dev/service-partners.html">Service Partners</a></dd>
                            <dd><a href="https://slint.dev/silicon-partners.html">Silicon Partners</a></dd>
                        </dl>
                    </div><!-- .col-6 -->
                    <div class="col-6">
                        <dl>
                            <dt style="color: var(--light, var(--color_dark_gray)) var(--dark, var(--color_light_gray_2));">Resources</dt>
                            <dd><a href="https://slint.dev/demos.html">Demos</a></dd>
                            <dd><a href="https://slint.dev/videos.html">Videos</a></dd>
                            <dd><a href="https://slint.dev/community.html">Community</a></dd>
                            <dd><a href="https://slint.dev/supported-boards.html">Supported Boards</a></dd>
                            <dd><a href="https://slint.dev/brand-guidelines.html">Brand Guidelines</a></dd>
                        </dl>
                    </div><!-- .col-6 -->
                    <div class="col-6">
                        <dl>
                            <dt style="color: var(--light, var(--color_dark_gray)) var(--dark, var(--color_light_gray_2));">Compare</dt>
                            <dd><a href="https://slint.dev/alternative-to-qt.html">Qt</a></dd>
                            <dd><a href="https://slint.dev/alternative-to-lvgl.html">LVGL</a></dd>
                            <dd><a href="https://slint.dev/alternative-to-flutter.html">Flutter</a></dd>
                            <dd><a href="https://slint.dev/alternative-to-electron.html">Electron</a></dd>
                            <dd><a href="https://slint.dev/declarative-rust-gui.html">Other Rust GUI Toolkits</a></dd>
                        </dl>
                    </div><!-- .col-6 -->
                    <div class="col-6">
                        <dl>
                            <dt style="color: var(--light, var(--color_dark_gray)) var(--dark, var(--color_light_gray_2));">Contact us</dt>
                            <dd><a href="https://slint.dev/meeting.html?event=online">Schedule Meeting</a></dd>
                            <dd><a href="mailto:info@slint.dev?subject=Contact%20from%20Website">Email</a></dd>
                            <dd><a href="https://chat.slint.dev">Chat</a></dd>
                            <dd><a href="https://github.com/slint-ui/slint/" target="_blank">GitHub</a></dd>
                            <dd hidden><a href="#">Twitter</a></dd>
                            <dd hidden><a href="#">Mastodon</a></dd>
                            <dd hidden><a href="#">Linkedin</a></dd>
                        </dl>
                    </div><!-- .col-6 -->
                </div>
                <div class="col-wrap">
                    <div class="col-1">
                        <p>Copyright &copy; 2023 SixtyFPS GmbH</p>
                    </div><!-- .col-1 -->
                </div>
            </footer>
            <!-- ====== Footer End ====== -->
        </div><!-- .wrap -->

        <!-- ====== All Javascript Files ====== -->
        <script src="https://slint.dev/assets/js/script.js?ver=1.2.5"></script>
    </body>

</html>
